<page-header autoTitle="false" [content]="content">
  <ng-template #content>
    <div nzLayout="inline" se-container>
      <se label="数据源" labelWidth="0">
        <nz-cascader
          [nzExpandTrigger]="'hover'"
          style="width: 300px"
          [nzOptions]="dbSourceOptions"
          [(ngModel)]="dbSources"
          (ngModelChange)="onCascaderChanges($event)"
        />
      </se>

      <nz-select
        style="width: 300px"
        nzPlaceHolder="选择表名"
        [nzDropdownMatchSelectWidth]="false"
        nzAllowClear
        nzShowSearch
        nzServerSearch
        [(ngModel)]="selectedTable"
        (nzOnSearch)="onTableSearch($event)"
      >
        <ng-container *ngFor="let o of optionList">
          <nz-option *ngIf="!isLoading" [nzValue]="o.tableName" [nzLabel]="o.tableName" />
        </ng-container>
        <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
          <i nz-icon nzType="loading" class="loading-icon"></i>
          Loading Data...
        </nz-option>
      </nz-select>
      &nbsp; &nbsp;

      <!-- <se>
        <button nz-button nzType="primary" (click)="navigateJpaScript()" [nzLoading]="btnLoading">生成JPA代码</button>
      </se>
      <se>
        <button nz-button nzType="primary" (click)="navigateDbScript()" [nzLoading]="btnLoading">生成表脚本</button>
      </se>
      <se>
        <button nz-button nzType="primary" (click)="fetchScript()" [nzLoading]="btnLoading">生成脚本</button>
      </se> -->
      <se>
        <button nz-button nzType="primary" (click)="onTableInfo()" [nzLoading]="tableLoading">明细信息</button>
      </se>
      <!-- <se>
        <button nz-button nzType="primary" (click)="onJpaCode()" [nzLoading]="jpaLoading">Jpa代码</button>
      </se> -->
    </div>
  </ng-template>
</page-header>

<nz-tabset style="padding: 5px" [(nzSelectedIndex)]="selectedTabIndex" [nzTabBarExtraContent]="tabsetTemplate">
  <nz-tab nzTitle="字段列表">
    <st #st [data]="xColumns" [columns]="columns" [expand]="expand" [ps]="500" size="small" expandRowByClick expandAccordion>
      <ng-template #expand let-item let-index="index" let-column="column">
        <p>目标库数据类型： {{ item!.tDataType }}; 异常信息： {{ item!.errorInfo }}</p>
        <p>扩展属性： {{ item!.attr1 }}； 备注： {{ item!.remark }}</p>
      </ng-template>
    </st>
  </nz-tab>
  <nz-tab nzTitle="约束列表">
    <st #st2 [data]="xConstraints" [columns]="constraints" [ps]="10" size="small" />
  </nz-tab>
  <nz-tab nzTitle="AI-JSON">
    <ngx-codemirror [(ngModel)]="tongYiJson" [options]="codeMirrorOptions" />
  </nz-tab>
</nz-tabset>
<ng-template #tabsetTemplate>
  <button nz-button nzType="default" (click)="openJpaScript()" [nzLoading]="btnLoading">查看JPA代码</button>
  <button nz-button nzType="default" (click)="openDbScript()" [nzLoading]="btnLoading">查看表脚本</button>

  <button nz-button nzType="default" (click)="navigateJpaScript()" [nzLoading]="btnLoading">跳转JPA代码</button>
  <button nz-button nzType="default" (click)="navigateDbScript()" [nzLoading]="btnLoading">跳转表脚本</button>
</ng-template>
